<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 兼容IE -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>bootstrap-treeview</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
</head>
<style>
  a{
    font-size: 12px;
  }

  .container{
    position: relative;
  }


  #treeview2{
    position: relative;
  }
  .search{
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 12px;
  }


  .more{
    /*position: absolute;*/
    /*right: -28px;*/
    /*bottom: 13px;*/
    /*height: 20px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 12px;
  }


  .row{
    border: 1px solid #d9d9d9;

  }
  .head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin:0 10px; border-bottom: 1px solid #d9d9d9;



  }
  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    height: 100%;
    border-bottom: 1px solid #325ce1;
    padding:0 10px;
    color:#325ce1;
  }
  .content{
    margin-top: 20px;
    width: 80%;
    max-width: 500px;
    min-width: 300px;
  }




</style>
<body>
<div class="container">
  <div class="row">
    <div class="head">
      <div class="title">集采</div>
      <a class="more" href="http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05">更多...</a>
    </div>


    <div class=" content">
      <div id="treeview2" class="">
      </div>
    </div>

  </div>
  <a class="search" href="http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05">搜素...</a>
</div>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
  $(function () {

    // 设置树的相关属性并构造树
    // $('#treeview1').treeview({
    //   backColor: "#FFFFFF",
    //   color: "#428bca",
    //   enableLinks: true,
    //   data: getTree()
    // });
    $('#treeview2').treeview({
      color: "#428bca",
      expandIcon: 'glyphicon glyphicon-chevron-right',
      collapseIcon: 'glyphicon glyphicon-chevron-down',
      nodeIcon: 'glyphicon glyphicon-bookmark',
      enableLinks: true,
      data: getTree()
    });
    // $('#treeview3').treeview({
    //   expandIcon: "glyphicon glyphicon-stop",
    //   collapseIcon: "glyphicon glyphicon-unchecked",
    //   nodeIcon: "glyphicon glyphicon-user",
    //   color: "yellow",
    //   backColor: "purple",
    //   onhoverColor: "orange",
    //   borderColor: "red",
    //   showBorder: false,
    //   showTags: true,
    //   highlightSelected: true,
    //   selectedColor: "yellow",
    //   selectedBackColor: "darkorange",
    //   data: getTree()
    // });

    //定义树里的数据来源
    function getTree() {
      var data = [
        {
          text: '服务',
          href: '#parent1',
          tags: ['4'],
          nodes: [
            {
              text: '人事服务',
              href: 'http://www.baidu.com',
              tags: ['2'],
              nodes: [
                {
                  text: '人事招聘服务',
                  href: 'http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05',
                  tags: ['0'],
                }
              ]
            }
            ,
            {
              text: '系统硬件',
              href: '#child2',
              tags: ['0'],
              nodes:[
                      {
                        text: '台式机和笔记本电脑',
                        href: 'http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05',
                        tags: ['0'],
                      },
                      {
                        text: '研发使用的电脑硬件',
                        href: 'http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05',
                        tags: ['0'],
                      },
                      {
                        text: '主机和服务器',
                        href: 'http://10.197.18.12:8080/km/doc/?categoryId=17d6f7d7e6bbd9cbf0fe3a54e6b95e97#j_path=%2FdocCategory&amp;docCategory=17d6f7c8002eb6492687cb3474297a05',
                        tags: ['0'],
                      },
                      {
                        text: '外围硬件',
                        href: '#child2',
                        tags: ['0'],
                      },
                      {
                        text: '系统维护',
                        href: '#child2',
                        tags: ['0'],
                      },
                      {
                        text: '电脑硬件修理',
                        href: '#child2',
                        tags: ['0'],
                      },
                      {
                        text: '软件实施',
                        href: '#child2',
                        tags: ['0'],
                      },
                     {
                        text: '软件许可',
                        href: '#child2',
                        tags: ['0'],
                     },
                     {
                        text: '软件维护',
                        href: '#child2',
                        tags: ['0'],
                     },
              ]
            },
            {
              text: '研发服务',
              href: '#child2',
              tags: ['0'],
              nodes:[{
                text: '合同研究组织',
                href: '#child2',
                tags: ['0'],
              },
                {
                  text: '临床试验管理系统和电子试验主文档管理系统',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '数统-系统费用',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '数统-外包服务费',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '资料翻译及校对',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '文献检索及相关软件费用',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '文献发表费用',
                  href: '#child2',
                  tags: ['0'],
                },
                {
                  text: '医学材料制作',
                  href: '#child2',
                  tags: ['0'],
                }
              ]
            }
          ]
        },
      //   {
      //     text: 'Parent 2',
      //     href: '#parent2',
      //     tags: ['0']
      //   },
      //   {
      //     text: 'Parent 3',
      //     href: '#parent3',
      //     tags: ['0']
      //   },
      //   {
      //     text: 'Parent 4',
      //     href: '#parent4',
      //     tags: ['0']
      //   },
      //   {
      //     text: 'Parent 5',
      //     href: '#parent5',
      //     tags: ['0']
      //   }
       ];
      return data;
    }
  });

</script>
</body>

</html>